import { PureComponent } from "react";
import { Button, Modal,ActivityIndicator,InputItem } from "antd-mobile"
import { connect } from 'dva';
import { handleImg, goToPage,isNull } from "../../utils/helper";
import MToast from '../../components/Util/MToast';
import { Row, Col,Select} from 'antd';
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
import {IntlProvider, addLocaleData,FormattedMessage} from 'react-intl';
import localeData from '../../../public/lang/data.json';
@connect(() => {
  return ({

  })
})
export default class PaySuccess extends PureComponent{
  constructor(props){
    super(props);
    this.state = {
      isSuccess:false,
      isFail:false,
      loading:false
    }
  }
  componentWillMount(){
    let {dispatch,location} = this.props;
    dispatch({
      type: "global/setHeaderTitle",
      payload: {
        title: '',
        path: location.pathname + location.search
      }
    });
    const query = location.search;
    console.log(query)
    const arr = query.split('&') // ['?s=', 'f=7']
    const token = arr[0].substr(7) // '1'
    const payer_id = arr[1].substr(8) // '7'
    console.log(token,payer_id)
    // goToPage({ dispatch, config: { url: "/shop_home" }, })
    // document.onreadystatechange=function(){
    //   if(document.readyState=="complete"){
    //    alert("ee")
    //   }
    // }
    dispatch({
      type: "form/query",
      payload: {
        apiInfo: {
          url: "pay/authorizeOrder?_c=app_pay_order_auth",
          params: [
            {
              "key":"pay_pal_token",
              "value":token
            },
            {
              "key":"payer_id",
              "value":payer_id
            }
          ],
          _c: "app_pay_order_auth"
        },
        callback: (result) => {
          let { data } = result;
          console.log(data)
          if(data.status=='COMPLETED'){
            this.setState({
              isSuccess:true,
              isFail:false,
              // loading:true
            });
            setTimeout(() => {
              if (browser.isInApp) {
                Func.callHander(bridge, "openHomePage", {})
              }
              // else{
              //   this.props.history.replace("/");
              //   window.location.reload();
              // }
              goToPage({ dispatch, config: { url: "/shop_home" }, })
            }, 10000);

            // goToPage({ dispatch, config: { url:'/shop_home'}, })
          }else{
              this.setState({
                isFail:true,
                isSuccess:false,
                // loading:true
              })
          }
        }
      }
    })

  }
  payFail=()=>{
    let {dispatch,location} = this.props;
    goToPage({ dispatch, config: { url: "/shop_home" }, })
  }
  render(){
    let {dispatch} = this.props;
    let {isSuccess,isFail,loading} = this.state;
    const messages = localeData[localStorage.locale];
    // if (loading) {
    //   return (
    //     <div className="normal">
    //       <ActivityIndicator toast text="正在加载" animating={true} />
    //     </div>
    //   )
    // }
    return(
      <IntlProvider
        locale={ localStorage.locale } messages={messages}
      >
        {isSuccess?<div style={{height:"100%",position: 'relative',height:'100%',}}>
          <Row style={{paddingTop:'80px',taxtAlign:'center'}}>
            <Col span={2}></Col>
            <Col span={20}> <img src="image/pay_success.png" style={{width:'100%'}}/></Col>
            <Col span={2}></Col>
          </Row>
          <p style={{color:'#2E2D35',textAlign:'center',fontSize:'18px',margin:'24px 0 40px'}}>
            {messages.paySuccess}
          </p>

        </div>:''}
        {isFail?<div style={{height:"100%",position: 'relative',height:'100%',}}>
          <Row style={{paddingTop:'80px',taxtAlign:'center'}}>
            <Col span={2}></Col>
            <Col span={20}> <img src="image/pay_fail.png" style={{width:'100%'}}/></Col>
            <Col span={2}></Col>
          </Row>
          <p style={{color:'#2E2D35',textAlign:'center',fontSize:'18px',margin:'24px 0 40px'}}>
            {messages.payFail}
          </p>
          <Button  type="primary" size="default" style={{ margin: "0 auto 20px",width:'80%',background:'#F09600',borderRadius:'20px',border:'0px',height:'42px',lineHeight:'42px' }} onClick={() => {this.payFail() }} >{T(messages.payHome)}</Button>
        </div>:''}

      </IntlProvider>
    )
  }
}
